<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				width: 900px;
				margin: 0 auto;
			}
			
			#nav {
				width: 900px;
				height: 100px;
			}
			
			#nav img {
				width: 200px;
				height: 100px;
			}
			
			#nav_left {
				width: 200px;
				height: 100px;
				float: left;
			}
			
			#nav_left img {
				width: 200px;
				height: 100px;
				margin-top: 1px;
			}
			
			#nav_right {
				width: 700px;
				height: 100px;
				display: inline-block;
			}
			
			.nav_s {
				font-size: 12px;
				color: black;
			}
			
			#nav_right .nav_s {
				margin-left: 10px;
			}
			
			#nav_select {
				width: 215px;
				height: 22px;
				float: right;
				margin-right: 10px;
				outline: none;
			}
			
			.gang {
				float: right;
				margin-top: 2px;
				margin-right: 14px;
				font-size: 10px;
				color: black;
				font-weight: bolder;
			}
			
			.sublink a {
				margin-top: 2px;
				text-decoration: none;
				font-size: 13px;
				color: darkgreen;
				float: right;
				font-weight: bolder;
			}
			
			#nav_top {
				width: 700px;
				height: 30px;
				margin-top: 5px;
			}
			
			#nav_bottom {
				width: 700px;
				height: 50px;
				position: relative;
			}
			
			#nav_bottom img {
				width: 700px;
				height: 35px;
			}
			
			#nav_li {
				width: 700px;
				float: left;
				position: absolute;
				left: 0;
				top: 5px;
			}
			
			#nav_li li {
				width: 100px;
				height: 30px;
				list-style: none;
				float: left;
				font-size: 14px;
				color: white;
				margin-left: 36px;
				margin-top: 3px;
			}
			
			#nav_li li:hover {
				color: yellow;
			}
			
			#drop_menu {
				position: absolute;
				left: 170px;
				top: 34px;
				display: none;
				z-index: 999999;
			}
			
			#drop_menu li {
				list-style: none;
				width: 200px;
				height: 35px;
				line-height: 35px;
				background: #0ca251;
				text-shadow: 1px 1px 1px #000;
				border: 1px solid lightgrey;
				border-top: 3px solid #349a48;
			}
			
			#drop_menu li a {
				text-decoration: none;
				color: white;
				font-size: 12px;
				margin-left: 5px;
				font-weight: bolder;
			}
			
			#drop_menu li a:hover {
				color: yellow;
			}
			
			#footer {
				width: 900px;
				height: 100px;
				position: relative;
				margin-top: 60px;
			}
			
			#footer li {
				list-style: none;
				float: left;
				margin-left: 5px;
			}
			
			#footer li a {
				text-decoration: none;
				color: forestgreen;
				font-size: 12px;
				font-weight: bolder;
			}
			
			.footer_p1 {
				position: absolute;
				left: 300px;
			}
			
			.footer_p2 {
				position: absolute;
				left: 300px;
				top: 24px;
			}
			
			.footer_p3 {
				width: 400px;
				height: 40px;
				position: absolute;
				left: -30px;
				top: 35px;
			}
			
			.footer_p3 .footer_s1 {
				text-align: center;
				font-size: 15px;
				color: black;
			}
			
			.footer_p3 .footer_s2 {
				font-size: 10px;
				position: absolute;
				left: 140px;
				top: 24px;
			}
			#middle{
				width: 900px;
				height: 800px;
				position: relative;
			}
			#middle_left{
				width:300px;
				height:440px;
				float: left;
				position: absolute;
				left: 300;
				animation: MoveL 2s forwards;
			}
			#middle_left_top{
				width:300px;
				height:400px;
				float: left;
			}
			#middle_left_top{
				background-image: url(img/left.jpg);
				background-size:100% 100%;
			}
			#middle_left_bottom{
				width:300px;
				height:310px;
				float: left;
			}
			.title_l{
				color: green;
				font-size: 16px;
				font-weight: bolder;
				margin-top: 10px;
			}
			.Contentl1{
				margin-top: 10px;
				color: grey;
				font-size: 13px;
			}
			.Contentl2{
				margin-top: 15px;
				color: grey;;
				font-size: 13px;
			}
			.Contentl3{
				margin-top: 15px;
				color: grey;;
				font-size: 13px;
			}

			#middle_bottom {
				width: 900px;
				height: 100px;
				float: left;
				position: absolute;
				left: 0;
				top: 720px;
			}
			
			#middle_bottom li {
				list-style: none;
				float: left;
				margin-top: 40px;
			}
			
			.middle_l_1 {
				float: left;
				width: 195px;
				height: 100px;
				background-image: url(img/box_0.jpg);
				background-size: 100% 100%;
			}
			.middle_l_1:hover{
				background-image: url(img/box_0_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_2 {
				width: 195px;
				height: 100px;
				float: left;
				margin-left: 15px;
				background-image: url(img/box_1.jpg);
				background-size: 100% 100%;
			}
			.middle_l_2:hover{
				background-image: url(img/box_1_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_3 {
				width: 195px;
				height: 100px;
				float: left;
				margin-left: 15px;
				background-image: url(img/box_2.jpg);
				background-size: 100% 100%;
			}
			.middle_l_3:hover{
				background-image: url(img/box_2_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_1 {
				width: 125px;
				height: 100px;
				margin-left: 25px;
				background-image: url(img/box_4.jpg);
				background-size: 100% 100%;
			}
			.middle_r_1:hover{
				background-image: url(img/box_4_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_2 {
				width: 125px;
				height: 100px;
				margin-left: 10px;
				background-image: url(img/box_3.jpg);
				background-size: 100% 100%;
			}
			.middle_r_2:hover{
				background-image: url(img/box_3_0.jpg);
				background-size: 100% 100%;
			}
			
			#weiixin {
				width: 250px;
				height: 250px;
			}
			
			.Erweima {
				position: absolute;
				left: 670px;
				top: 520px;
				z-index: 222;
				display: none;
			}
			#middle_center{
				width:300px;
				height:400px;
				position: absolute;
				left: 310px;
			}
			#middle_center_top{
				width:300px;
				height:400px;
			    background-image: url(img/center.jpg);
			    background-size: 100% 100%;
			}
			
			.middle_center_bottom{
				width:300px;
				height:310px;
			}
			.title_m{
				margin-top: 10px;
				color: green;
				font-size: 16px;
				font-weight: bolder;
			}
			.Contentm1{
				margin-top: 18px;
				color: grey;;
				font-size: 13px;
			}
			.Contentm2{
				margin-top: 15px;
				color: grey;;
				font-size: 13px;
			}
			.Contentm3{
				margin-top: 15px;
				color: grey;;
				font-size: 13px;
			}
			@keyframes MoveL{
				from{left:300px}
				to{left:0px}
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<!--首页导航区域-->
			<div id="nav">
				<div id="nav_left">
					<img src="img/logo.png" />
				</div>
				<div id="nav_right">
					<div id="nav_top">
						<span class="nav_s">中国</span>
						<span class="sublink"><a href="">进入全球官网</a></span>
						<span class="gang">|</span>
						<select name="" id="nav_select">
							<option value="" id="selectL">Select Language</option>
							<option value="" id="enSelect">English</option>
							<option value="" id="chSelect">Chinese</option>
						</select>
					</div>
					<div id="nav_bottom">
						<img src="img/绿条.png" />
						<ul id="nav_li">
							<li>新闻动态</li>
							<li id="drop_li">
								美食与营养
							</li>
							<li>加盟流程</li>
							<li>关于我们</li>
							<li>快餐店位置查询</li>
						</ul>
						<!--全效果下拉菜单-->
						<ul id="drop_menu">
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=001" onclick="return checklink(&#39;001&#39;)">超值 Value</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=002" onclick="return checklink(&#39;002&#39;)">经典 Classics</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=003" onclick="return checklink(&#39;003&#39;)">精选 Premium</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=004" onclick="return checklink(&#39;004&#39;)">低脂 Low Fat</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=005" onclick="return checklink(&#39;005&#39;)">百味卷 Wrap</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=006" onclick="return checklink(&#39;006&#39;)">沙拉 Salad</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=007" onclick="return checklink(&#39;007&#39;)">聚餐服务 Catering</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=008" onclick="return checklink(&#39;008&#39;)">饮料和小食 Drinks &amp; Sides</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=009" onclick="return checklink(&#39;009&#39;)">早餐 BREAKFAST</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=010" onclick="return checklink(&#39;010&#39;)">营养 Nutrition</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=011" onclick="return checklink(&#39;011&#39;)">如何点餐 How To Order</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--中部内容-->
			<div id="middle">
				<div id="middle_left">
					<div id="middle_left_top"></div>
					<div id="middle_left_bottom">
						<p class="title_l">新品川香,限时尝鲜</p>
						<p class="Contentl1">新品川香，限时尝鲜 该产品仅限2016年9月28日至2017年03月14日在SUBWAY®中国内地餐厅供应。</p>
					    <p class="Contentl2">上述活动仅限堂吃及外带，不含外送，且不得与其他优惠同时使用。 产品以实物为准，图片仅供参考。 更多活动详情及优惠信息，请关注SUBWAY®官方微信及微博。</p>
					    <p class="Contentl3">SUBWAY® 是Subway IP Inc.的注册商标。©2016 Subway IP Inc.版权所有</p>
					</div>
				</div>
				<div id="middle_center">
					<div id="middle_center_top"></div>
					<div id="middle_center_bottom">
						<p class="title_m">一样新鲜,多样尝鲜</p>
						<p class="Contentm1">上述产品限于SUBWAY®赛百味中国内地餐厅供应。
餐厅提供与现有三明治口味种类相同的百味卷及沙拉。百味卷价格与同款正价三明治价格相同。沙拉价格为同款正价三明治价格+3元。不与其他优惠同享。产品以实物为准，图片仅供参考。
更多活动详情及优惠信息，请关注SUBWAY®官方微信及微博。</p>
					    <p class="Contentm2">SUBWAY® 赛百味可以在法律允许的范围内对活动进行适当调整。</p>
					    <p class="Contentm3">SUBWAY® is a Registered Trademark of Subway IP Inc. ©2016 Subway IP Inc.</p>
					</div>
				</div>
				<ul id="middle_bottom">
					<li class="middle_l_1">
						<a href="http://www.subway.com.cn/position.aspx"></a>
					</li>
					<li class="middle_l_2">
						<a href="http://www.subway.com.cn/menu.aspx?d=011"></a>
					</li>
					<li class="middle_l_3">
						<a href="http://www.subway.com.cn/news.aspx?t=1"></a>
					</li>
					<li class="middle_r_1">
						<a href="http://weibo.com/login.php"></a>
					</li>
					<li class="middle_r_2"></li>
				</ul>
				<div id="weixin">
					<img src="img/code.png" class="Erweima" />
				</div>
			</div>
			<!--首页底部区域-->
			<ul id="footer">
				<div class="footer_p1">
					<li>
						<a href="">主页</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">菜单/营养</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">如何加盟</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">关于我们</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">快餐店位置查询</a>
					</li>
				</div>
				<div class="footer_p2">
					<li>
						<a href="">联系我们</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">使用权限</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">隐私权政策</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">SUBWAY Partners™</a>
					</li>
					<div>
						<div class="footer_p3">
							<span class="footer_s1">SUBWAY® is a Registered Trademark of Subway IP Inc.</span>
							<span class="footer_s2">®2016 Subway IP Inc.</span>
						</div>
			</ul>
			</div>
	</body>
	<script>
		var drop_li = document.getElementById("drop_li");
		var dropMenu = document.getElementById("drop_menu");
		var dropMenuLi = document.querySelectorAll("#drop_menu>li");
		var middle_r_2 = document.getElementsByClassName("middle_r_2")[0];
		var ErweimaDiv = document.getElementsByClassName("Erweima")[0];
		//下拉菜单
		drop_li.onmouseover = function(){
			dropMenu.style.display= "block";
		}
		drop_li.onmouseout = function(){
			dropMenu.style.display = "none";
		}
		dropMenu.onmouseover = function(){
			dropMenu.style.display = "block";
		}
		dropMenu.onmouseout = function(){
			dropMenu.style.display = "none";
		}
		//二维码
		middle_r_2.onmouseover = function(){
			ErweimaDiv.style.display = "block";
		}
		middle_r_2.onmouseout = function(){
			ErweimaDiv.style.display = "none";
		}
		
	</script>
	

</html>